<template>
    <container type="top-header" :show="{header:formShow}" class="g-width100 g-height100" header-style="height:auto;" main-style="padding:0;">
        <Form slot="header" inline
              :form-items="formItems"
              submit-bus-key="MpUserTagManageList"
              ref="form"
              label-width=""
        ></Form>
        <Table slot="main"
               ref="table"
               form-submit-bus-key="MpUserTagManageList"

               :columns="columns"
               :operations="tableOperations"
               unique-label="name"
               v-on:toolbarSearchClick="formShow = !formShow"
        ></Table>
    </container>
</template>

<script>
    import Container from '../../../../../common-util/src/components/page/Container.vue'
    import Form from '../../../../../common-util/src/components/page/Form.vue'
    import Table from '../../../../../common-util/src/components/page/Table.vue'

    export default {
        components:{
            Form,
            Table,
            Container
        },
        data(){
            return {
                formShow: true,
                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            select:{
                                url: this.$baseURL.wx + '/wx/mp/config/list',
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: 'submit',
                                    requestMethod:'get',
                                    url: (form)=>{
                                        return this.$baseURL.wx + '/wx/mp/usertag/' + form.appCode + '/list'
                                    },
                                    label: '查询'
                                }
                            ]
                        }
                    }
                ],
                columns:[
                    {
                        prop: 'id',
                        label:'标签id'
                    },
                    {
                        prop: 'name',
                        label:'标签名称'
                    },
                    {
                        prop: 'count',
                        label:'粉丝数量'
                    }
                ],
                tableOperations:[
                    {
                        action: this.addUserTag,
                        label:'添加'
                    },
                    {
                        action: this.updateUserTag,
                        disabledOnMissingSelect:true,
                        label:'修改'
                    },
                    {
                        action: this.deleteUserTag,
                        disabledOnMissingSelect:true,
                        label:'删除'
                    }
                ]
            }
        },
        methods:{
            getAppCode(){
                return this.$refs.form.getFormData().appCode
            },
            addUserTag(){
                if(!this.getAppCode()){
                    this.$message.error('请选择公众号')
                    return
                }
                this.$prompt('请输入标签名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator:(value)=>{return !!value},
                    inputErrorMessage: '标签名不能为空'
                }).then(({ value }) => {
                    this.axios.post(this.$baseURL.wx + '/wx/mp/usertag/' + this.getAppCode() + '/create','tagName=' + value)
                        .then(res=>{
                            this.$message.success('添加成功成功')
                            this.$refs.table.refreshData()
                        }).catch(error=>{
                        if(error.response){
                            this.$message.error(error.response.data.msg)
                        }else {
                            this.$message.error('网络错误或服务不可用')
                        }
                    })
                }).catch(() => {

                })
            },
            updateUserTag(row){

                if(!this.getAppCode()){
                    this.$message.error('请选择公众号')
                    return
                }

                this.$prompt('请输入新的标签名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: row.name,
                    inputValidator:(value)=>{return !!value},
                    inputErrorMessage: '标签名不能为空'
                }).then(({ value }) => {
                    this.axios.put(this.$baseURL.wx + '/wx/mp/usertag/' + this.getAppCode() + '/update/'+row.id,'tagName=' + value)
                        .then(res=>{
                            this.$message.success('修改成功')
                            this.$refs.table.refreshData()
                        }).catch(error=>{
                        if(error.response){
                            this.$message.error(error.response.data.msg)
                        }else {
                            this.$message.error('网络错误或服务不可用')
                        }
                    })
                }).catch(() => {

                })
            },
            deleteUserTag(row){

                if(!this.getAppCode()){
                    this.$message.error('请选择公众号')
                    return
                }
                this.$confirm('确定要删除吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.delete(this.$baseURL.wx + '/wx/mp/usertag/' + this.getAppCode() + '/delete/'+row.id)
                        .then(res=>{
                            this.$message.success('删除成功')
                            this.$refs.table.refreshData()
                        }).catch(error=>{
                            if(error.response){
                                this.$message.error(error.response.data.msg)
                            }else {
                                this.$message.error('网络错误或服务不可用')
                            }
                    })
                }).catch(() => {

                });
            }
        }
    }
</script>

<style scoped>

</style>